<template>
  <!--<div class="home">-->
  <!--  <img alt="Vue logo" src="../assets/logo.png">-->
  <!--  <HelloWorld msg="Welcome to Your Vue.js App"/>-->
  <!--</div>-->
  <!--<el-button type="primary" >Primary</el-button>-->
  <div>
    <div style="margin: 10px 5px">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button>其他</el-button>
    </div>
    <div style="margin: 10px 5px">
      <el-input v-model="seach" style="width: 240px; margin-right: 10px" placeholder="Please input"/>
      <el-button type="primary" @click="queryByName">查询</el-button>
    </div>
    <div>
      <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="500"
      >
        <span style="margin: 15px 5px">请输入您的数据</span>

        <el-form
            style="max-width: 600px; margin: 10px 5px" :rules="rulers" ref="Form"
            :model="Form"
            status-icon
            label-width="auto"
            class="demo-ruleForm"

        >
          <el-form-item label="家居名" prop="name">
            {{ serverValidErrors.name }}
            <el-input v-model="Form.name"/>
          </el-form-item>
          <el-form-item label="制造商" prop="maker">
            {{ serverValidErrors.maker }}
            <el-input v-model="Form.maker"/>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            {{ serverValidErrors.price }}
            <el-input v-model="Form.price"/>
          </el-form-item>
          <el-form-item label="销量" prop="sales">
            {{ serverValidErrors.sales }}
            <el-input v-model="Form.sales"/>
          </el-form-item>
          <el-form-item label="库存" prop="stock">
            {{ serverValidErrors.stock }}
            <el-input v-model="Form.stock"/>
          </el-form-item>

        </el-form>
        <!--<template #footer>-->
        <!--    <span class="dialog-footer">-->
        <!--       <el-button @click="dialogVisible = false">取 消</el-button>-->
        <!--       <el-button type="primary" @click="save">确 定</el-button>-->
        <!--    </span>-->
        <!--</template>-->

        <el-form-item>
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="saveAndUpdate">
            Confirm
          </el-button>
        </el-form-item>

      </el-dialog>
    </div>


    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="name" label="家居名"/>
      <el-table-column prop="maker" label="制造商"/>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="sales" label="销量"/>
      <el-table-column prop="stock" label="库存"/>

      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleClick(scope.row)">修改
          </el-button>
          <!--<el-button link type="primary" size="small" @click="deleFurn(scope.row)">删除</el-button>-->

          <el-popconfirm
              width="220"
              confirm-button-text="OK"
              @confirm="deleFurn(scope.row)"
              cancel-button-text="No, Thanks"
              icon-color="#626AEF"
              title="Are you sure to delete this?"
          >
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 5px">
      <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[5, 7, 10, 13, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import request from "@/util/request";
import {ElMessage} from 'element-plus'


export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  data() {
    return {

      tableData: [],
      seach: '',
      Form: {},
      dialogVisible: false,
      a: '',
      pageSize4: 10,
      currentPage4: 1,
      total: 300,
      rulers: {
        name: [
          {required: true, message: '请输入家居名', trigger: 'blur'}
        ],
        maker: [
          {required: true, message: '请输入制造商', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|0)(\.\d+)?$/, message: '请输入数字', trigger: 'blur'}
        ],
        sales: [
          {required: true, message: '请输入销量', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|0)$/, message: '请输入数字', trigger: 'blur'}
        ],
        stock: [
          {required: true, message: '请输入库存', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|0)$/, message: '请输入数字', trigger: 'blur'}
        ],
      },
      serverValidErrors: {},

    }
  },
  created() {
    // this.queryByName()
    this.list()
  },
  methods: {
    queryByName() {
      console.log("seach:", this.seach)
      // alert(this.seach)

      request.get("/api/queryByName", {
        params: {

          pageNum: this.currentPage4,
          pageSize: this.pageSize4,
          seach: this.seach
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.pageSize4 = res.data.size
        this.currentPage4 = res.data.current
      })
    },
    handleCurrentChange(currentPage4) {

      // console.log(currentPage4) 不能输出控制台
      // alert(currentPage4)   可以输出

        request.get("/api/queryByName", {
        params: {
          pageNum: currentPage4,
          pageSize: this.pageSize4,
          seach: this.seach,
        }
      }).then(res => {
        // console.log(res)
        this.tableData = res.data.records
        this.pageSize4 = res.data.size
        this.currentPage4 = res.data.current
        // this.total = res.data.total

      })

    },

    handleSizeChange(pageSize4) {
      // console.log(pageSize4) 不能输出控制台
      // alert(pageSize4)   可以输出

      request.get("/api/queryByName", {
        params: {
          pageSize: this.pageSize4,
          pageNum: this.currentPage4,
          seach: this.seach

        }
      }).then(res => {
        // console.log(res)
        this.tableData = res.data.records
        this.pageSize4 = res.data.size
        this.currentPage4 = res.data.current
        // this.total = res.data.total

      })
    },
    list() {
      request.get("/api/pageFurn2", {
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize4
        }
      }).then(res => {
        // console.log(res)
        if(res.code === 402){
          this.$message({
            type: "error",
            message: res.msg
          })
          this.$router.push("/")
        }else {
          this.tableData = res.data.records
          this.pageSize4 = res.data.size
          this.currentPage4 = res.data.current
          this.total = res.data.total
        }

      })
    },
    add() {
      this.dialogVisible = true
      this.Form = {}
      //点击新增报错问题所在
      // this.$refs["Form"].resetFields()
      //问题解决
      this.$nextTick(() => {
        this.$refs['Form'].resetFields();
      })
      this.serverValidErrors = {}
    },
    handleClick(row) {
      let a = JSON.parse(JSON.stringify(row))
      // console.log(this.Form.id)
      request.post("/api/queryById", a).then(res => {

        // console.log(res)
        this.Form = res.data


        this.dialogVisible = true
      })

      // this.Form = JSON.parse(JSON.stringify(row))
      // this.dialogVisible = true

    },

    save() {

      // console.log("res=", res)

      this.$refs.Form.validate((res) => {

        if (res) {
          request.post("/api/save", this.Form).then(res => {
            if (res.code === 200) {
              ElMessage({
                message: '添加成功',
                type: 'success',
              })
              this.dialogVisible = false
              this.queryByName()
            } else if (res.code === 400) {

              this.serverValidErrors.name = res.data.name
              this.serverValidErrors.maker = res.data.maker
              this.serverValidErrors.price = res.data.price
              this.serverValidErrors.sales = res.data.sales
              this.serverValidErrors.stock = res.data.stock

              ElMessage({
                message: '服务器验证失败！',
                type: 'error',
              })
              this.dialogVisible = true
            }


          })
        } else {
          this.$message({
            type: "error",
            message: "验证失败"
          })
          return false
        }
      })
    },
    saveAndUpdate() {
      if (this.Form.id) {
        request.post("/api/updateFurn", this.Form).then(res => {
          // console.log(res)

          if (res.code === 200) {
            // ElMessage({
            //   message: '修改成功',
            //   type: 'success',
            // })
            this.$message({
              type: "success",
              message: "修改成功"
            })
          } else {
            ElMessage({
              message: '修改失败',
              type: 'error',
            })
          }
          this.dialogVisible = false

          this.queryByName()
        })
      } else {
        this.save()
      }
    },
    deleFurn(row) {

      request.post('/api/deleFurn', JSON.parse(JSON.stringify(row))).then(res => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          })
        }
        this.queryByName()
      })
    }

  }
}
</script>
